<template>
	<m-layout title="下载App" :isShow="false" gap="0">
		<view class="main flex-column flex-1">
			<view class="contBox flex-column flex-1">
				<view class="">

				</view>
			</view>
			<view class="butt flex-between">
				<view class="left">
					<view class="qrcode-box ">
						<u-qrcode ref="qrcode" size='110' canvas-id="qrcode" :value="qrcodeUrl" />
					</view>
					<view class="sao">
						<text>扫一扫下载</text>
					</view>
				</view>
				<view class="">
					<m-button class="btn2 flex-center" @click="open(iosUrl)">
						<m-icon size="38" type="icon-ios" color="#fff" spa="0 10 0 0" />
						<text>IOS下载</text>
					</m-button>
					<m-button class="btn2" @click="open(url)">
						<m-icon size="38" type="icon-anzhuo" color="#fff" spa="0 10 0 0" />
						<text>安卓下载</text>
					</m-button>
					<m-button class="btn1" @click="Jump('/pages/login/login')">
						<m-icon size="38" type="icon-webduan" color="#fff" spa="0 10 0 0" />
						<text>Web端</text>
					</m-button>
				</view>
			</view>
		</view>
		<view class="guideBox" v-if="guideShow" @click="guideShow=true">
			<image src="../../../static/images/pages/login/guide.png" mode=""></image>
		</view>
	</m-layout>
</template>

<script>
	import { mapState } from 'vuex'
	import { GetAppVersion, GetConfig } from '@/api/Ctrls.js'
	import { invUrl } from '@/common/baseconfig.js'
	export default {
		data() {
			return {
				url: '', //  安卓子下载链接
				guideShow: false,
				qrcodeUrl: `${invUrl}pages/login/download/download`, //  二维码 链接
			};
		},
		onLoad() {

		},
		computed: {
			...mapState({
				config: state => state.general.config,
			}),
			iosUrl() {
				return this.config['706']
			},
		},
		onShow() {
			let ua = window.navigator.userAgent;
			if (ua.match(/MicroMessenger/i) == "MicroMessenger") {
				this.guideShow = true;
			};
			this.GetAppVersion();
		},
		methods: {
			open(url) {
				this.openURL({
					openUrl: url
				})
			},
			async GetAppVersion() {
				const { data, success } = await GetAppVersion({
					// apptype: 1, //请求新版的下载地址
				})
				this.url = data.url;
			},
		},

	}
</script>

<style lang="scss">
	page {
		height: 100%;
		::v-deep .layout{
			height: 100%;
			.layout-content {
				height: 100%;
			}
		}
	}

	.layout-content {
		height: 100%;
		flex: 1;
	}

	.layout-box {
		height: 100%;
		box-sizing: border-box;
		// background: url('@/static/images/pages/login/register_bg.png') no-repeat;
		// background-size: 100% 700rpx;
	}

	.main {
		height: 100%;
		background-color: #786BFF;
		// padding: 30rpx 0rpx;
		box-sizing: border-box;
		// background: url('../../../static/images/pages/download/download-bg.png')no-repeat;
		// background-size: 100% auto;
		// background-position: 0 -60rpx;
		justify-content: space-around;

		.butt {
			background: rgba(255, 255, 255, 1);
			box-sizing: border-box;
			align-items: center;
			/* #ifdef APP-PLUS */
			padding: 40rpx 30rpx 90rpx;
			/* #endif */
			/* #ifndef APP-PLUS */
			padding: 40rpx 30rpx 120rpx;
			/* #endif */

			.left {
				padding: 10rpx;
				border-radius: 20rpx;
				background: linear-gradient(0deg, var(--text_thenme) 0%, #A867FD 100%);

				.sao {
					text-align: center;
					padding: 10rpx 0;
					font-size: 26rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
			}

			.qrcode-box {
				background: #FFFFFF;
				padding: 10rpx;
				border-radius: 20rpx;
			}
		}

		.m-button { 
			padding: 24rpx 0rpx;
			width: 347rpx;
			border-radius: 48rpx;
			border-color: #fff;

			text {
				display: block;
				width: 200rpx;
				font-size: 26rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.m-button+.m-button {
			margin-top: 20rpx;
		}

	}

	.contBox {
		background: url('../../../static/images/pages/download/download.png') no-repeat;
		background-size: cover;
		background-position: center;
	}

	.guideBox {
		position: absolute;
		top: 0rpx;
		width: 100%;
		height: 100%;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>